import { observer } from 'mobx-react-lite';
import { useEffect, useState } from 'react';
import { isArray, isEmpty } from 'esy-ui';
import { Empty, Header, Img } from '@/components';
import { useGlobalStore, useUserInfoStore } from '@/mobx';
import { postWithdrawalOrder } from '@/services';
import { useFormatText } from '@/hooks';
import QuickNav from '../quick-nav';

// const data = [
//   {
//     Id: 2,
//     OrderNo: '31732706670',
//     Amount: 400,
//     Revenue: 0,
//     ActualAmount: 400,
//     Score: 400,
//     WithdrawalAccountNo: '15616164616446',
//     WithdrawalAccount: '',
//     WithdrawalBankName: '桂林银行',
//     Status: 0,
//     WithdrawalTime: '2024-11-27 19:24:30',
//     UpdateTime: '2024-11-27 19:24:30',
//     ModeName: '银联',
//     Stitle: '银行卡',
//     Mtitle: '在线提款',
//   },
//   {
//     Id: 1,
//     OrderNo: '31732706040',
//     Amount: 200,
//     Revenue: 1.02,
//     ActualAmount: 198.98,
//     Score: 200,
//     WithdrawalAccountNo: '15616164616446',
//     WithdrawalAccount: '',
//     WithdrawalBankName: '桂林银行',
//     Status: 0,
//     WithdrawalTime: '2024-11-27 19:14:00',
//     UpdateTime: '2024-11-27 19:14:00',
//     ModeName: '银联',
//     Stitle: '银行卡',
//     Mtitle: '在线提款',
//   },
// ];

function WithdrawRecord() {
  const { changeState } = useGlobalStore();
  const { userInfo } = useUserInfoStore();
  const [list, setList] = useState([]);
  const { text } = useFormatText();

  useEffect(() => {
    if (userInfo.Token) {
      changeState('isLoading', true);
      postWithdrawalOrder({})
        .then((res: any) => {
          setList(res?.Data);
        })
        .catch(() => {})
        .finally(() => {
          changeState('isLoading', false);
        });
    }
  }, [changeState, userInfo.Token]);

  console.info(list);

  return (
    <div className='bg-body w-full h-full flex flex-col'>
      <Header title='text_36' isBalance isGoHome />
      <QuickNav />
      <div className='flex-1 px-3 py-4 overflow-y-auto'>
        {isArray(list) && !isEmpty(list) ? (
          list.map((it) => (
            <div key={it.Id} className='border border-solid border-bdr-1 rounded bg-white my-2'>
              <div className='flex items-center justify-between'>
                {!it.Icon ? <Img boxClassName='ml-3 w-8 h-8' src={it.Icon} /> : null}
                <div className='flex flex-1 p-3 border-b border-solid border-bdr-1 items-center'>
                  <div className='flex flex-1 flex-col gap-2'>
                    <div className='text-sm'>{it.WithdrawalBankName}</div>
                    <div className='text-desc text-xs'>{it.WithdrawalAccountNo}</div>
                  </div>
                  <div className='text-base text-green-500 font-bold justify-self-end'>+{it.ActualAmount} RMB</div>
                </div>
              </div>
              <div className='text-desc text-right py-2 text-xs px-3'>
                {text('text_184')}
                {it.WithdrawalTime}
              </div>
            </div>
          ))
        ) : (
          <Empty />
        )}
      </div>
    </div>
  );
}

export default observer(WithdrawRecord);
